﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>JS Console - Example</title>
	<link href="styles/js-console.css" rel="stylesheet" />
	<style>
		input[type=text]{
			border:1px solid black;
			padding:5px 15px;
			background-color:black;
			color:white;
			font-family:Consolas;		   
			margin-bottom:5px;
		}

		a{
			color:black;
			border:1px solid black;
			padding:5px 15px;						
			text-decoration:none;	   
			display:inline-block;		 
			margin: 15px 0;
		}

		a:hover{
			text-decoration:underline;
		}
	</style>
</head>
<body>
	<label for="tb-first">First number: </label>
	<input type="text" id="tb-first"/>
	<br />							  
	<label for="tb-second">Second number: </label>
	<input type="text" id="tb-second"/>
	<br />
	<a href="#" onclick="onFindBiggerButtonClick()">Find bigger</a>
	<div id="console">
	</div>
	<script src="scripts/js-console.js">	  
	</script>		  
	<script>														 

		function onFindBiggerButtonClick() {
			var first = jsConsole.readFloat("#tb-first");
			var second = jsConsole.readFloat("#tb-second");
			var bigger = first;

			if (bigger < second) {
				bigger = second;
			}

			jsConsole.writeLine("the bigger is: " + bigger);
		}											
	</script>			  
</body>
</html>
